<template>
  <div class="factory-assessment-box">
    <div class="tab">
      <tabs
        :tabs-arr="TAB_ARR"
        :active-index="auditStatus"
        @returnIndex="onHandletabs"
      >
      </tabs>
    </div>
    <el-container class="factory-assessment-container">
      <component :is="content" :ref="content" :audit-status="auditStatus">
        <!-- <template #default="{ currentSelect }">
          <el-button
            type="primary"
            plain
            size="mini"
            :style="{ marginBottom: 10 + 'px' }"
            @click="toNewSendInvoice(currentSelect)"
            >新建送票申请</el-button
          >
        </template> -->
      </component>
    </el-container>
  </div>
</template>
<script>
import tabs from '@pc/m-components/m-tabs/index.vue';
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common';
import { queryGiveInvoiceListCount } from '@api/hossyn-order-center';
import Deliver from './components/Deliver/index.vue';
import WatingForDeliver from './components/WatingForDeliver/index.vue';

export default {
  components: {
    tabs,
    Deliver,
    WatingForDeliver,
  },
  data() {
    return {
      TAB_ARR: [
        { lab: '待送票', val: 0 },
        { lab: '送票列表', val: 1 },
        { lab: '待签收', val: 2 },
        { lab: '待审核', val: 3 },
        { lab: '签收驳回', val: 4 },
        { lab: '签收通过', val: 5 },
      ],
      paging: true, // 分页显隐
      PAGE_NUMBER, // 页码数组
      PAGINATION_LAYOUT, // 页码功能布局
      cycleList: [],
      resultType: 0,
      auditStatus: 0,
    };
  },
  computed: {
    content() {
      return this.auditStatus === 0 ? 'WatingForDeliver' : 'Deliver';
    },
  },
  created() {
    this.buttonMethod();
    this.queryGiveInvoiceListCount();
  },
  methods: {
    buttonMethod() {
      const arr = [
        // { type: 'button', val: '返回', handle: this.back },
        {
          type: 'primary',
          val: '新建送票申请',
          handle: () => {
            if (this.content === 'WatingForDeliver') {
              this.toNewSendInvoice(this.$refs.WatingForDeliver.currentSelect);
            } else {
              this.toNewSendInvoice();
            }
          },
        },
      ];
      const btn = {
        type: 'btn',
        arr,
      };
      this.$store.commit('changeLayoutHandle', btn);
    },
    //  切换表头
    onHandletabs(val) {
      this.auditStatus = val;
    },
    toNewSendInvoice(row) {
      const query = {};
      if (row) {
        query.row = JSON.stringify(row);
      }
      this.$router.push({
        path: '/distributorSide/invoiceManagement/add',
        query,
      });
    },
    async queryGiveInvoiceListCount() {
      const { data } = await this.$axios({
        url: queryGiveInvoiceListCount,
        method: 'post',
        data: {},
      });

      this.TAB_ARR = [
        { lab: '待送票', val: 0 },
        { lab: '送票列表', val: 1 },
        { lab: '待签收', val: 2, badge: data.payload[1] },
        { lab: '待审核', val: 3, badge: data.payload[2] },
        { lab: '签收驳回', val: 4, badge: data.payload[3] },
        { lab: '签收通过', val: 5 },
      ];
    },
  },
};
</script>
<style lang="less" scoped>
.tab {
  margin: 20px 20px;
}
.factory-assessment-box {
  margin: 0 0 10px 0 !important;
  .factory-assessment-container {
    height: 100%;
    overflow: auto;
    .action-button-box {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 12px;
      padding: 0 20px;
    }
    .pageBox {
      margin: 0 20px !important;
      padding: 7px 26px 6px 0;
      border: 1px solid @cutOffRuleColor;
      border-top: none;
      border-radius: 0 0 3px 3px;
    }
  }
}
</style>
